import React, { useEffect, useRef } from 'react';
export default function Demo() {
    const appRef = useRef();
    const btnRef = useRef();

    useEffect(() => {
        // 1. 冒泡
        btnRef.current.addEventListener('click', function () {
            console.log('1. btn click');
        })

        appRef.current.addEventListener('click', function () {
            console.log('2. app click');
        })

        document.addEventListener('click', function () {
            console.log('3. document click')
        })

        window.addEventListener('click', function () {
            console.log('4. window click')
        })

        // 2. 捕获
        // btnRef.current.addEventListener('click', function () {
        //     console.log('1. btn click');
        // }, true)

        // appRef.current.addEventListener('click', function () {
        //     console.log('2. app click');
        // }, true)

        // document.addEventListener('click', function () {
        //     console.log('3. document click')
        // }, true)

        // window.addEventListener('click', function () {
        //     console.log('4. window click')
        // }, true)

    }, []);

    function onBtnClick(e) {
        e.stopPropagation();
        // 在这里没法阻止原生ref事件？因为先ref冒泡比react先执行
        // e.nativeEvent.stopImmediatePropagation()
        console.log('react button click');
    }

    function onAppClick(e) {
        console.log('react app click');
    }

    return (
        <div className="App" ref={appRef} onClick={onAppClick}>
            <button ref={btnRef} onClick={onBtnClick}>按钮</button>
            <p>
                1. 合成事件默认也是冒泡的，<br />
                e.stopPropagation()可以阻止react的合成事件的冒泡触发，<br />
                也能阻止document, window, 但是不可以阻止ref绑定的dom。 <br /> <br />

                2. ref原生冒泡顺序: btn app document window <br /><br />

                3. 阻止react冒泡方法：
            </p>
        </div>
    )
}
